<!-- File: /app/View/Categorias/index.ctp -->
<h2>Categorías disponibles</h2>

<div id="dialog" title="Añadir Categoría">
    <?php echo $this->Form->create('Categoria', array('action' => 'add') ); ?>
    <fieldset class="ui-helper-reset">
        <?php
        echo $this->Form->input('nombre');
        echo $this->Form->input('descripcion');
        ?>
    </fieldset>
    <?php echo $this->Form->end("Añadir"); ?>

</div>


    <div>
       <div style="width: 50%;float:left"> <button id="add_tab" >Añadir Nueva Categoría</button></div>
       <div style="width: 50%;float:right"> <button id="add_carta">Asignar Carta</button></div>


<div style="width: 50%;float: left;">



    <table id="tableCategorias">
    <thead>
    <tr>
        <th>Id</th>
        <th>Nombre de la categoría</th>
        <th>Descripción</th>
        <th>Editar</th>
        <th>Eliminar</th>
        <th>Ver cartas</th>
    </tr>
    </thead>
    <tbody>

    <!-- Here is where we loop through our $posts array, printing out post info -->

    <?php foreach ($categorias as $cat): ?>
    <tr>
        <td><?php echo $cat['Categoria']['id']; ?></td>
        <td><?php echo $cat['Categoria']['nombre']; ?></td>
        <td><?php echo $cat['Categoria']['descripcion']; ?></td>
        <td><?php echo $this->Html->link("Editar", array('action' => 'edit', $cat['Categoria']['id']));?></td>
        <td><?php echo $this->Form->postLink(
            'Eliminar',
            array('action' => 'delete', $cat['Categoria']['id']),
            array('confirm' => 'Vas a borrar la categoría ¿Estás seguro?'));
            ?></td>
        <td><?php echo $this->Form->postLink(
            'Ver cartas',
            array('action' => 'index', $cat['Categoria']['id']));
            ?></td>


    </tr>
    <?php endforeach; ?>
    </tbody>

</table>
</div>





<div style="width: 50%;float: right;">



    <table id="tableCartas">
        <thead>
        <tr>
            <th>Id</th>
            <th>Nombre de la carta (interno)</th>
            <th>Nombre de la carta (app)</th>
            <th>Desasignar</th>
        </tr>
        </thead>
        <tbody>

        <!-- Here is where we loop through our $posts array, printing out post info -->

        <?php

        if ($cartasAsignadas && ! empty($cartasAsignadas) ){
        foreach ($cartasAsignadas as $carta): ?>
        <tr>
            <td><?php echo $carta['Carta']['id']; ?></td>
            <td><?php echo $carta['Carta']['nombre_interno']; ?></td>
            <td><?php echo $carta['Carta']['nombre_app']; ?></td>
            <td><?php echo $this->Form->postLink(
                'Desasignar',
                array('action' => 'deleteCartaCategoria', $carta['CartaCategoria']['id']),
                array('confirm' => 'Vas a borrar la relación carta- categoría ¿Estás seguro?'));
                ?></td>
        </tr>
            <?php endforeach;}?>
        </tbody>


    </table>
</div>
    </div>

<script>
    $(function() {


       $('#tableCartas').dataTable({
                "bJQueryUI": true,
                "oLanguage": {
                "sLengthMenu": "Mostrar _MENU_ cartas por página",
                "sZeroRecords": "No existen datos",
                "sInfo": "_START_ al _END_ de _TOTAL_ cartas",
                "sInfoEmpty": "No existen datos",
                "sInfoFiltered": "(filtrado desde _MAX_ total cartas)"
            }
        } );

        $('#tableCategorias').dataTable({
            "bJQueryUI": true,
            "oLanguage": {
                "sLengthMenu": "Mostrar _MENU_ categorías por página",
                "sZeroRecords": "No existen datos",
                "sInfo": "_START_ al _END_ de _TOTAL_ categorías",
                "sInfoEmpty": "No existen datos",
                "sInfoFiltered": "(filtrado desde _MAX_ total categorías)"
            }
        } );

        // modal dialog init: custom buttons and a "close" callback reseting the form inside
        var dialog = $( "#dialog" ).dialog({
            autoOpen: false,
            modal: true,
        });


        // addTab button: just opens the dialog
        $( "#add_tab" )
                .button()
                .click(function() {
                    dialog.dialog( "open" );
                });

    });
</script>
